<template>
  <div  >
    
    <Nav></Nav>
    <HeadNav></HeadNav>

    <div class="box book_box">
      <div class="book_img"  >
          <img v-loading="loading1"
        referrer="no-referrer|origin|unsafe-url"
          style="width: 450px; height: 480px;"
         :src="'https://images.weserv.nl/?url=' + this.Book.img"
          fit="fill">
      </div>
      <div class="book_buy">
        <div class="book_name">{{this.Book.title}}</div>
        <div class="book_content book_buy_content">
          <div class="book_list_content">作者: {{this.Book.author}}</div>
          <div class="book_list_content">ISBN: {{this.Book.isbn}}</div>
          <div class="book_list_content">出版社: {{this.Book.bookPress}}</div>
          <div class="book_list_content">出版时间: {{this.Book.createTime}}</div>
        </div>
        <div class="book_content book_buy_price">
          <div class="book_buy_info">
            <span class="labelSpan">售价</span>
            <span class="labelPrice">￥{{this.Book.price}}</span>
          </div>
          <div class="book_buy_info">
            <span class="labelSpan">市场价</span>
            <s>￥{{this.Book.inventory}}</s>
          </div>
        </div>
        <div class="book_content">
          <span class="labelSpan">运费</span>
          ￥6.00
        </div>
        <div class="book_content">
          <span class="labelSpan">上架时间</span>
          {{this.Book.createTime}}
        </div>
        <div class="book_content">
          <span class="labelSpan">库存</span>
          520件
        </div>
        <div class="book_content">
          <el-button class="plainBtn" plain @click="goBuyPage(book.id)"
            >立即购买</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-shopping-cart-2"
            class="cartBtn"
            @click="addBookToCart"
            >加入购物车</el-button
          >
        </div>
      </div>
    </div>
    <div class="box">
      <div class="book_sort">
        <div class="tab">
          <div class="tab_head">分类</div>
          <div v-for="sort in fenlei" :key="sort.categoriesId" class="tab_list">
            <p>{{ sort.classname }}</p>
          </div>
        </div>
      </div>
      <div class="book_info">
        <el-tabs value="first" type="card">
          <el-tab-pane label="商品详情" name="first">
            <div class="product">
              <div class="markdown-body">
                  <h1>作者简介</h1>
                    <p>{{this.Book.authorIntro}}</p>
                    <h1>内容简介</h1>
                    <p>{{this.Book.describe}}</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="店铺评价" name="second">
            <div class="evaluation"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../com/components/Common/Nav";
import HeadNav from "../../com/components/Common/HeadNav";
import axios from 'axios'

export default {
  components: { Nav, HeadNav },
  data(){
      return{
         ISBN:'-',
         Book:{},
         fenlei:[],
        loading:'',
        loading1:true,
      }
  },
 methods: {
    open2() {      //请求成功提示
       this.$message({
          message: '成功获取图书信息！',
          type: 'success'
        });
      },
       open4() {        //请求失败提示
        this.$message.error('请求出错！');
      },
     async getbook(){
       await axios.get("http://localhost:8081/fl-book/getBookByISBN",{
            params: {
                ISBN:this.ISBN
            }
        }).then((res)=>{
           
            this.Book = res.data.data;
           
            this.loading.close(); 
            this.loading=false;
             this.good_fenlei();
             this.loading1=false;
           this.open2();  
           
           
        }).catch((error)=>{
           this.loading.close(); 
          this.open4();
          console.log(error);

        })
     },
      async good_fenlei(){
       await axios.get("http://localhost:8081/fl-categories/getAllCategories",{
         
        }).then((res)=>{
        
          this.fenlei=res.data.data;
           
        }).catch((err)=>{
          console.log(err)
        })
      },
        openFullScreen2() {      //加载
         this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      
      },
     
 },
  created() {
      
       this.openFullScreen2();
        this.ISBN= this.$route.query.id; //传过来的ISBN
       this.getbook();
      
   
   
    

    
  }
};
</script>

<style>
.content {
  background-color: #ffffff;
}
.box {
  margin: 10px auto;
  width: 1240px;
}
.book_box {
  height: 500px;
}
.book_img {
  margin: 10px;
  width: 450px;
  height: 480px;
  float: left;
  
  position:  absolute;
}
.book_buy {
  margin: 10px;
  width: 750px;
  height: 480px;
  float: right;
  padding: 1px;
}
.book_buy_content {
  border: 1px #f3f0e9 solid;
  padding: 5px;
}
.book_content {
  margin: 10px auto;
  width: 740px;
  max-height: 120px;
  line-height: 35px;
}

.book_name {
  margin: 10px auto;
  width: 740px;
  line-height: 35px;
  font-size: 25px;
  
  overflow: hidden;
}

.book_list_content1 {
  width: 32%;
  display: inline-block;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
  font-size: 15px;
}
.book_buy_info {
  width: 100%;
  line-height: 40px;
  font-size: 15px;
}
.book_buy_price {
  background-color: #f3f0e9;
  padding: 5px;
}
.labelSpan {
  color: #999;
}
.labelPrice {
  color: #9d232c;
  font-size: 17px;
}
.plainBtn {
  width: 150px;
  color: #9d232c;
  background-color: #f3f0e9;
  border: 1px #f3f0e9 solid;
}
.plainBtn:hover {
  background-color: white;
  color: #9d232c;
  border: 1px #b2bac2 solid;
}
.cartBtn {
  width: 150px;
  background-color: #9d232c;
  border: 1px #9d232c solid;
}
.cartBtn:hover {
  background-color: #f52b21;
}

.book_sort {
  margin: 10px 10px;
  width: 200px;
  /*height: 780px;*/
  float: left;
  position: absolute;
  border-right: 1px #f3f0e9 solid;
}

.book_info {
  margin: 10px 10px;
  width: 1000px;
  /*height: 780px;*/
  float: right;
  background-color: #f7f7f6;
}
.tab {
  width: 100%;
  /*height: 420px;*/
}
.tab_head {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f3f0e9;
  margin: 1px 0px;
}
.tab_list {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  margin: 1px 0px;
}
.tab_list:hover {
  background-color: #a0a9b1;
}
.product {
  width: 100%;
  padding: 0px 15px;
  height: 800px;
}
.evaluation {
  width: 100%;
  height: 2500px;
}
</style>
